<script setup lang="ts">
import {ref,computed,watch, watchEffect, onMounted, useTemplateRef, onUnmounted,provide} from 'vue';
// import ButtonCounter1 from "./ButtonCounter.vue";
// import ButtonCounter2 from "./ButtonCounter2.vue";

//    const data = ref("");
//    let  setTimeoutId ;
//    onMounted(()=>{
//     setTimeoutId=setTimeout(()=>{
//         data.value="xiaoketanglail";
//     },100);
//    });
//    onUnmounted(()=>{
//         clearTimeout(setTimeoutId);
//    });
// const posts = ref([
//   { id: 1, title: 'My journey with Vue' },
//   { id: 2, title: 'Blogging with Vue' },
//   { id: 3, title: 'Why Vue is so fun' }
// ])
// const postFontSize = ref(1);
// const addClick=()=>{
//     console.log("父组件的方法");
// }
// const click=(param)=>{
//     console.log("子组件传过来得",param);
// }
// const xd = ref("vu额语言课堂");
// const ab=ref("jsquery语言课堂");
// const xd= ref(0);

// const addClick=()=>{
//   xd.value ++;
// }
// provide("xd",{xd,addClick});
//const xd=ref(true);
</script>
<template>
    <h1>commentzujian</h1>
    <!-- <h1>父组件</h1>
    <button  @click="()=>{xd=!xd}">切换组件</button>
    <KeepAlive>
        <ButtonCounter1 v-if="xd"/>
    </KeepAlive> -->
    <!-- <ButtonCounter1 v-show="xd"/> -->
    <!-- <ButtonCounter2 v-if="!xd"/> -->
   <!--  <sapn>{{ xd }}</sapn>
    <sapn>{{ ab }}</sapn>
     <n/>
    <ButtonCounter v-model:xd="xd" v-model:ab="ab"/> -->
    <!-- <ButtonCounter :xd="xd" @updateValue="(n)=>{xd=n}"></ButtonCounter> -->
    <!-- <ButtonCounter @childClick="click"></ButtonCounter> -->
    <!-- <div>接口请求内容：</div>
    <span>{{ data }}</span>
    <h1>Here is a child component!</h1>
    <h4>{{ title }}</h4> -->
    <!-- <ButtonCounter title="这是父传值得组件"/> -->
    <!-- <div :style="{fontSize:postFontSize + 'em'}">
        <ButtonCounter v-for="post in posts" 
        :key="post.id" :title="post.title"
         @enlarge-text="postFontSize += 0.1"
         @reduce-text="postFontSize=postFontSize-0.1" :addClick="addClick"></ButtonCounter>
    </div> -->
  
</template>
<style scoped>

</style>